<template>
  <div class="profile-container">
    <div v-if="profile" class="profile-wrap">
      <div class="avatar-wrap" :style="{ backgroundImage: `url(${profile.avatar || defaultAvatar})` }" />
      <div class="main-wrap">
        <div class="header">
          <h3>{{ profile.enName }}</h3>
          <h4>{{ profile.cnName }}</h4>
        </div>
        <!-- eslint-disable-next-line vue/no-v-html -->
        <div class="body" v-html="profile.introduction" />
        <div v-if="profile.github || profile.email" class="footer">
          <a v-if="profile.github" :href="profile.github" title="GitHub" target="_blank"><font-awesome-icon :icon="['fab', 'github']" /> {{ profile.github }}</a>
          <span v-if="profile.email" title="Email"><font-awesome-icon :icon="['far', 'envelope']" /> {{ profile.email }}</span>
        </div>
      </div>
    </div>
    <div v-else class="empty-profile">
      <a-empty>
        <span slot="description">暂无内容</span>
      </a-empty>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import MarkdownIt from 'markdown-it';
import { IProfile, ISetting } from '@/types/schema';
import { Context } from '@nuxt/types/index';
export default Vue.extend({
  name: 'PageProfile',
  async asyncData ({ $axios, error }: Context) {
    const { code, data } = await $axios.$get('/api/profile');
    if (code === 1) {
      const profile = data.profile;
      const md = new MarkdownIt({
        html: true,
        breaks: false
      });
      profile.introduction = md.render(profile.introduction);
      return {
        profile
      };
    } else {
      error({
        statusCode: 404,
        message: '未找到该页面'
      });
    };
  },
  data () {
    return {
      profile: {} as IProfile,
      defaultAvatar: ''
    };
  },
  head (this: any) {
    const settings = this.$store.state.settings as ISetting;
    const suffix = ` - ${settings.blogName}`;
    return {
      title: '关于' + suffix,
      meta: [
        { hid: 'description', name: 'description', content: settings.blogIntro || settings.blogName },
        { name: 'keywords', content: settings.blogName }
      ]
    };
  }
});
</script>
<style scoped>
.profile-container {
  min-height: 90vh;
}

.profile-wrap {
  background-image: linear-gradient(-90deg,#00BCD4 0,#1890ff 100%);
  border-radius: 10px;
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  padding: 30px;
  top: 100px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.avatar-wrap {
    width: 120px;
    height: 120px;
    background-size: contain;
    background-color: #ccc;
    border-radius: 50%;
    border: 3px solid #fff;
    position: absolute;
    top: -60px;
    left: 50%;
    margin-left: -60px;
}

.main-wrap {
  color: #fff;
  padding-top: 55px;
}

.main-wrap .header {
  text-align: center;
}

.main-wrap .header h3 {
  font-size: 36px;
  color: #fff;
  font-weight: 300;
  margin-bottom: 5px;
}

.main-wrap .header h4 {
  font-size: 32px;
  color: #fff;
  font-weight: 400;
}

.main-wrap .body {
  font-size: 16px;
  margin-top: 40px;
  white-space: pre-line;
}

.main-wrap .footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  font-size: 15px;
}

.main-wrap .footer a {
  color: #fff;
  display: block;
}

.empty-profile {
  padding-top: 150px;
}

@media (max-width: 576px) {
  .profile-wrap {
    border-radius: 0;
  }

  .main-wrap .footer {
    display: block;
  }
}
</style>
